import React from 'react';
import { Card } from '../ui/Card';
import { SnackList } from '../snacks/SnackList';
import type { Box } from '../../types';

interface BoxCardProps {
  box: Box;
}

export function BoxCard({ box }: BoxCardProps) {
  return (
    <Card>
      <div className="flex justify-between items-start mb-4">
        <div>
          <h3 className="text-lg font-semibold">{box.name}</h3>
          <p className="text-gray-600">房间 {box.roomNumber}</p>
        </div>
        <span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full text-sm">
          {box.snacks.length} 个商品
        </span>
      </div>
      
      <SnackList snacks={box.snacks} />
    </Card>
  );
}